<template>
  <div class="dataModel">
    <div class="left" style="padding: 10px">
      <div class="l-one">
        <span style="border-left: 2px solid blue; font-size: 20px">&nbsp;&nbsp;&nbsp;主题域目录</span>
        <span style="color: blue; text-align: right">&nbsp;&nbsp;&nbsp; </span>
      </div>
      <hr />

      <div class="l-three">
        <customTree :ancestralId="listQuery.ancestralId" :btnTitle="' 创建模型规范根目录 '" @getId="getId" :type="false" @getTree="getTree" :expandType="'1'" />
      </div>
    </div>

    <div class="right">
      <el-row>
        <el-col :span="24" style="color: blue">主题数据模型</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <span style="border-left: 2px solid blue; font-size: 20px">&nbsp;&nbsp;&nbsp;主题数据模型管理</span>
        </el-col>
        <el-col :span="20"> </el-col>
      </el-row>
      <el-row>
        <!-- <el-col :span="3">
          <el-select v-model="optionsArr.releaseStatus" placeholder="请选择发布状态">
            <el-option v-for="item in statusoptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-col> -->
        <!--        <el-col :span="3" :offset="1">-->
        <!--          <el-select v-model="optionsArr.entity" placeholder="请选择实体对象">-->
        <!--            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
        <!--          </el-select>-->
        <!--        </el-col>-->
        <!-- <el-col :span="3" :offset="1">
          <el-cascader v-model="optionsArr.modelType" placeholder="请选择模型类型" :options="modelTypeoptions" :props="{ checkStrictly: true }" clearable></el-cascader>
        </el-col> -->
        <el-col :span="4">
          <el-input placeholder="请输入中文或英文名称" clearable v-model="optionsArr.tableComment" class="input-with-select">
            <!-- <el-button slot="append" icon="el-icon-search" @click="primaryClick"></el-button> -->
          </el-input>
        </el-col>

        <el-col :span="6" style="margin-left: 40px">
          <el-button type="primary" @click="primaryClick">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="root">重置</el-button>
        </el-col>
      </el-row>

      <el-table ref="table" v-loading="loading" element-loading-text="正在加载，请稍后" :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="英文名称" sortable align="center" min-width="100px">
          <template slot-scope="{ row }">
            <span style="cursor: pointer; color: blue" @click="lookvalueFun(row)">{{ row.tableName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="中文名称" sortable align="center" min-width="150px">
          <template slot-scope="{ row }">
            <span style="cursor: pointer; color: blue" @click="lookvalueFun(row)">{{ row.tableComment }}</span>
          </template>
        </el-table-column>
        <el-table-column label="数据类型" align="center" min-width="100px">
          <template slot-scope="{ row }">
            <span>{{ row.modelType }}</span>
          </template>
        </el-table-column>
        <el-table-column label="数据记录数" align="center" min-width="100px">
          <template slot-scope="{ row }">
            <span v-if="!row.dataTotal">加载中...</span>
            <span v-else>{{ row.dataTotal == null ? 0 : row.dataTotal }}条</span>
          </template>
        </el-table-column>
        <el-table-column label="安全等级" align="center" min-width="100px">
          <template slot-scope="{ row }">
            {{ offoron(securityoptions, row.tableSecurityLevel) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" min-width="100px" class-name="small-padding fixed-width">
          <template slot-scope="{ row }">
            <el-button type="text" icon="el-icon-tickets" size="small" @click="lookvalueFun(row)"> 详情 </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" :page-sizes="[15, 20, 25, 30, 35, 40]" @pagination="getList(listQuery)" />
    </div>
    <masterdata-table-form ref="form" @refreshList="getList" />
    <bindData ref="listData" @getList="getList" />
    <div class="lookzzc" v-if="isboollook">
      <marketLookview :lookobj="lookobj" @offFunValue="offFunValue" :list="list" :treeList="treeList" />
    </div>
  </div>
</template>
<script>
import { detailtableLise } from '@/api/masterdata/dataModelApi'
import Pagination from '@/components/Pagination/index.vue'
import bindData from '@/views/masterdata/bindData.vue'
import { fetchMasterdataTableList, getNumberData } from '@/api/masterdata/masterdataTablelist'
import masterdataTableForm from '@/views/masterdata/masterdataTableForm.vue'
import marketLookview from './marketLookview.vue'
import dayjs from 'dayjs'
import customTree from '@/components/customTree/index.vue'
export default {
  components: {
    masterdataTableForm,
    bindData,
    Pagination,
    customTree,
    marketLookview,
  },
  computed: {
    getodd: function () {
      return (value) => {
        return this.esdasFun(value)
      }
    },
  },
  data() {
    return {
      securityoptions: [
        { label: '机密', value: 1 },
        { label: '秘密', value: 2 },

        { label: '内部公开', value: 3 },
        {
          label: '外部公开',
          value: 4,
        },
      ],
      size: '',
      loading: 'true',
      index: '',
      list: [],
      lookobj: {},
      isboollook: false,
      modelTypeoptions: [
        {
          value: '关联表',
          label: '关联表',
          children: [
            {
              value: '业务数据表',
              label: '业务数据表',
            },
            {
              value: '基础数据表',
              label: '基础数据表',
            },
          ],
        },
        {
          value: '普通表',
          label: '普通表',
          children: [
            {
              value: '基础数据表',
              label: '基础数据表',
              children: [
                {
                  value: '实体编码表',
                  label: '实体编码表',
                },
                {
                  value: '基础信息表',
                  label: '基础信息表',
                },
              ],
            },
          ],
        },
        {
          value: '字典表',
          label: '字典表',
        },
      ],
      typeoptions: [
        {
          value: '监测数据',
          label: '监测数据',
        },
        {
          value: '普通数据',
          label: '普通数据',
        },
        {
          value: '多媒体数据',
          label: '多媒体数据',
        },
        {
          value: '空间数据',
          label: '空间数据',
          children: [
            {
              value: '影响数据',
              label: '影响数据',
            },
            {
              value: '三维数据',
              label: '三维数据',
            },
            {
              value: '矢量数据',
              label: '矢量数据',
            },
          ],
        },
      ],
      optionsArr: {
        tableComment: undefined,
        releaseStatus: undefined,
        applyStatus: undefined,
        modelType: [],
      },
      applyoptions: [
        {
          label: '发布',
          options: [
            {
              value: 'APPROVE_ONLINE_IN_PROGRESS',
              label: '待审核（发布）',
            },
            {
              value: 'APPROVE_ONLINE_PASS',
              label: '审核通过（发布）',
            },
            {
              value: 'APPROVE_ONLINE_REFUSE',
              label: '审核失败（发布）',
            },
          ],
        },
        {
          label: '废止',
          options: [
            {
              value: 'APPROVE_OFFLINE_IN_PROGRESS',
              label: '待审核（废止）',
            },
            {
              value: ' APPROVE_OFFLINE_IN_PASS',
              label: '审核通过（废止）',
            },
            {
              value: 'APPROVE_OFFLINE_IN_REFUSE',
              label: '审核失败（废止）',
            },
          ],
        },
      ],
      statusoptions: [
        { label: '已发布', value: '0' },
        { label: '废止', value: '1' },
        { label: '草稿', value: '2' },
      ],
      filterText: '',
      total: 0,
      NODE_KEY: 'id', // id对应字段
      activeindex: 0,
      options: [],
      activearr: [],
      value: '',
      listQuery: {
        tableName: undefined,
        page: 1,
        limit: 15,
        ancestralId: '12',
        // type: 0,
      },
      tableKey: 0,
      listLoading: true, // 是否加载
      // 添加弹框
      dialogVisible: false,
      // 分页
      currentPage4: 30,
      pageArray: [
        {
          value: '15',
          label: '15',
        },
        {
          value: '20',
          label: '20',
        },
        {
          value: '25',
          label: '25',
        },
        {
          value: '30',
          label: '30',
        },
        {
          value: '35',
          label: '35',
        },
      ],
      //表格
      tableData: [],
      //侧边层级
      treeList: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      eitdValue: {},
      initParam: {
        // 新增参数
        name: '新增节点',
        parentId: 0,

        children: [],
      },
      updataArr: [],
      MAX_LEVEL: 5, // 设定最大层级
      currentNodekey: '',
      startId: null,
      NODE_ID_START: 0, // 新增节点id，逐次递减
      title: '',
    }
  },

  methods: {
    loadData() {
      setTimeout(async () => {
        let objList = [] //储存table数据中的所有的id
        this.tableData.forEach((item) => {
          objList.push(item.id)
        })
        let obj = {
          ids: objList,
        }
        let { data } = await getNumberData(JSON.stringify(obj))
        data.data.forEach((item) => {
          this.tableData.forEach((i) => {
            if (i.id == item.id) {
              i.dataTotal = item.DataTotal
            }
          })
        })
      }, 1000)
    },
    offoron(item, value) {
      let list = ''
      item.map((v, i) => {
        if (v.value == value) {
          list = v.label
        }
      })
      return list
    },
    getId(data) {
      this.listQuery.ancestralId = '12'
      // this.listQuery.type = '0'
      this.listQuery.directoryId = data.id
      this.getList(this.listQuery)
    },
    getTree(data) {
      this.treeList = data
    },

    esdasFun(value) {
      let list = ''
      this.applyoptions.map((v, i) => {
        v.options.map((val, index) => {
          if (val.value == value) {
            list = val.label
          }
        })
      })
      return list
    },

    offFunValue() {
      this.isboollook = false
    },
    exportClick() {
      if (this.activearr.length) {
        this.download('/system/metadataModel/table/export', { ids: this.activearr }, 'post', `${dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')}.xlsx`)
      } else {
        this.$message({
          type: 'error',
          message: '请选择数据',
        })
      }
    },

    lookvalueFun(item) {
      detailtableLise({
        params: {
          id: item.id,
        },
      }).then((res) => {
        this.lookobj = res.data.data
      })
      // this.lookobj = item
      this.isboollook = true
    },
    root() {
      this.optionsArr = {
        tableComment: undefined,
        releaseStatus: undefined,
        applyStatus: undefined,
        modelType: [],
      }
      this.listQuery = {
        directoryId: this.listQuery.directoryId,
        page: this.listQuery.page,
        limit: this.$store.getters.defaultPageSize,
        // type: 0,
      }
      this.getList(this.listQuery)
    },
    primaryClick() {
      let obj = {
        tableComment: this.optionsArr.tableComment,
        releaseStatus: this.optionsArr.releaseStatus,
        entity: this.optionsArr.entity,
        applyStatus: this.optionsArr.applyStatus,
        modelType: this.optionsArr.modelType.length ? this.optionsArr.modelType.join('/') : [],
      }
      this.getList({ ...this.listQuery, ...obj })
    },
    dologdin(item) {
      this.dialogVisible = item
      this.getList({ ...this.listQuery })
    },

    getList(item) {
      this.loading = true
      fetchMasterdataTableList(item).then((response) => {
        this.tableData = response.data.data.records
        this.total = response.data.data.total
        this.loading = false
        this.loadData()
      })
    },

    // 多选
    handleSelectionChange(value) {
      let ids = []
      value.map((v, i) => {
        // ids.push(v.id.replace(/\"/g, ""))
        ids.push(v.id)
      })

      this.updataArr = value
      this.activearr = ids.join().replace(/[\[\]]/g, '')
      this.activeindex = value.length
    },

    handleClick(item) {
      this.getTreeList()
      this.index = item
      this.dialogVisible = true
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
  },
}
</script>
<style lang="scss" scoped>
.el-cascader,
.el-input,
.el-select {
  width: 100% !important;
}

.item {
  margin-right: 20px;
}

.lookzzc {
  position: absolute;
  right: 11px;
  top: 0.625rem;
  width: 99%;
  height: 95vh;
  z-index: 4;
}

.zzc {
  width: 80%;
  height: 100%;
  margin: 0 auto;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.dataModel {
  width: 100%;
  height: 94vh;
  display: flex;
  position: relative;

  .left {
    width: 22%;
    background-color: white;
    border-right: 1px solid rgb(223, 230, 236);

    .l-one {
      width: 100%;
      height: 6vh;
      box-sizing: border-box;
      display: flex;
      list-style: none;
      flex-direction: row;
      align-items: center;
      justify-content: space-evenly;

      span {
        width: 50%;
        height: 100%;
        line-height: 6vh;
      }
    }

    .l-tow {
      width: 100%;
      height: 4vh;
      border-radius: 2px;

      input {
        width: 90%;
        height: 100%;
        outline: 0;
        border: none;
        border-radius: 2px 0px 0px 2px;
      }

      i {
        width: 10%;
        height: 100%;

        text-align: center;
      }
    }

    .l-three {
      width: 100%;
      height: 90vh;
    }
  }

  .right {
    width: 78%;
    margin: 10px;
    padding: 10px;
    background-color: white;
    overflow: auto;

    .el-table {
      width: 100%;
    }
  }
}

.btn {
  width: 100%;
}
</style>
